<template>
  <!-- PV 折线图容器 -->
  <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { watch } from "vue";
// 对外暴露的属性值
const props = defineProps({
  value: {
    // 属性值名称
    type: Object, // 类型为对象
    default: null, // 默认为 null
  },
});

// 初始化折线图
function initLineChat() {
  var chartDom = document.getElementById("lineChat");
  var myChart = echarts.init(chartDom);
  var option;
  // 从 props.value 中获取日期集合和 pv 访问量集合
  const pvDates = props.value.pvDates;
  const pvCounts = props.value.pvCounts;
  option = {
    xAxis: {
      type: "category",
      data: pvDates, // x 轴数据
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: pvCounts, // 设置 pv 访问量
        type: "line",
      },
    ],
  };
  // 移动到折点上，显示数值
  option.tooltip = { trigger: "axis" };
  option && myChart.setOption(option);
}

// 侦听属性, 监听 props.value 的变化，一旦 props.value 发生变化，就调用 initLineChat 初始化折线图
watch(
  () => props.value,
  () => initLineChat()
);
</script>